//页面基准
function getFontSize() {
  return Number(String(document.documentElement.style.fontSize).replace('px', ''));
}

/*****************************
 * cxt 为绘图上下文环境
 * r 为大圆半径
 * x，y 为相对 canvas 原点的坐标位置
 * rot 为顺时针旋转角度
 ****************************/
function draw_start(cxt, r, x, y, rot) {
  cxt.save();
  cxt.fillStyle = 'red';
  cxt.strokeStyle = 'red';
  cxt.translate(x, y);
  cxt.rotate(rot / 180 * Math.PI);
  cxt.scale(r, r);
  startPath(cxt);
  cxt.stroke();
  cxt.restore();
}

//五角星标准路径
function startPath(cxt) {
  cxt.beginPath();
  for (let i = 0; i < 5; i++) {
    let x1 = Math.cos((54 + i * 72) / 180 * Math.PI);
    let y1 = Math.sin((54 + i * 72) / 180 * Math.PI);
    let x2 = Math.cos((18 + i * 72) / 180 * Math.PI) * 0.5;
    let y2 = Math.sin((18 + i * 72) / 180 * Math.PI) * 0.5;
    cxt.lineTo(x2, y2);
    cxt.lineTo(x1, y1);
  }
  cxt.closePath();
}

window.onload = () => {
  let c1 = document.getElementById('c1');
  let cxt = c1.getContext('2d');
  c1.width = c1.width * getFontSize();
  c1.height = c1.height * getFontSize();
  draw_start(cxt, 5, 100, 100, 0);
  draw_start(cxt, 5, 200, 100, 0)
  draw_start(cxt, 5, 300, 100, 0)
}
